<template>
  <div
    :class="['bw-design-com-logic-cobtainer', isMax && 'bw-logic-design-max']"
  >
    <div class="bw-design-com-logic-head">
      <span class="head-title"> 自定义逻辑 </span>

      <div class="head-extra">
        <a-tooltip v-if="!isMax" placement="top" title="最大化">
          <Icon
            class="bw-extra-icon"
            icon="ant-design:fullscreen-outlined"
            @click="onSize(true)"
          />
        </a-tooltip>

        <a-tooltip v-else placement="top" title="最小化">
          <Icon
            class="bw-extra-icon"
            icon="ant-design:fullscreen-exit-outlined"
            @click="onSize(false)"
          />
        </a-tooltip>

        <a-tooltip placement="top" title="关闭">
          <Icon
            class="bw-close-icon"
            icon="ant-design:close-outlined"
            @click="onCloseCode"
          />
        </a-tooltip>
      </div>
    </div>

    <div class="bw-design-com-logic-content">
      <div ref="codeEdit" class="bw-logic-code-design"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLogicCode } from './util'

const emit = defineEmits(['close', 'save'])
const { isMax, codeEdit, onSize, onCloseCode } = useLogicCode(emit)
</script>

<style lang="less" scoped>
.bw-design-com-logic-cobtainer {
  width: 100%;
  height: 100%;

  .bw-design-com-logic-head {
    height: 35px;
    display: flex;
    padding: 0 8px;
    align-items: center;
    width: calc(100% - 16px);
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;

    .head-title {
      font-size: 14px;
      font-weight: 600;
    }

    .bw-extra-icon {
      margin-right: 8px;
    }
  }

  .bw-design-com-logic-content {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;

    .bw-logic-code-design {
      width: 100%;
      height: 100%;
    }
  }
}

.bw-logic-design-max {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #fff;
  z-index: 1200;
}
</style>
